<template>
	<view>
		<view>
			<image class="box" mode="scaleToFill" src="https://ffa.firstui.cn/uploadfile/240820191500060.png" />
		</view>
		<view class="container1">
			<ant-tabs :items="items" :current="current" onChange="onChange">
				<swiper :current="current" :autoplay="false" :vertical="false" :circular="false"
					onChange="onSwipeChange">
					<block v-for="(item, index) in items" :key="index">
						<swiper-item>
							<view class="content">
								<view class="box3">
									<view class="description">{{ item.description }}</view>
									<view class="details">
										<view class="detail-item">
											<text class="label">{{ item.shijian }}</text>
											<text class="value">{{ item.time }}</text>
										</view>
										<view class="detail-item">
											<text class="label">{{ item.chixu }}</text>
											<text class="value">{{ item.duration }}</text>
										</view>
										<view class="detail-item">
											<text class="label">{{ item.minzhu }}</text>
											<text class="value">{{ item.ethnicity }}</text>
										</view>
									</view>
									<view class="warning">
										<text>{{ item.warning }}</text>
									</view>
								</view>
							</view>
						</swiper-item>

						<swiper-item>
							<view class="recommend-section">
								<block v-for="(item, index1) in hotels" :key="index1">
									<view class="hotel-card">
										<image class="hotel-image" :src="item.image" mode="aspectFill"></image>
										<view class="hotel-info">
											<view class="hotel-name">{{ item.name }}</view>
											<view class="hotel-type">{{ item.type }}</view>
											<view class="hotel-tags">
												<block v-for="(item, index2) in item.tags" :key="index2">
													<text class="tag">{{ item }}</text>
												</block>
											</view>
											<view class="hotel-location">{{ item.location }}</view>
										</view>
										<view class="hotel-rating">评分 {{ item.rating }}</view>
									</view>
								</block>
							</view>
						</swiper-item>

						<swiper-item>
							<view class="recommend-section">
								<block v-for="(item, index1) in hotelss" :key="index1">
									<view class="hotel-card">
										<image class="hotel-image" :src="item.image" mode="aspectFill"></image>
										<view class="hotel-info">
											<view class="hotel-name">{{ item.name }}</view>
											<view class="hotel-type">{{ item.type }}</view>
											<view class="hotel-tags">
												<block v-for="(item, index2) in item.tags" :key="index2">
													<text class="tag">{{ item }}</text>
												</block>
											</view>
											<view class="hotel-location">{{ item.location }}</view>
										</view>
										<view class="hotel-rating">评分 {{ item.rating }}</view>
									</view>
								</block>
							</view>
						</swiper-item>

						<swiper-item>
							<view class="recommend-section">
								<block v-for="(item, index1) in hotelsss" :key="index1">
									<view class="hotel-card">
										<image class="hotel-image" :src="item.image" mode="aspectFill"></image>
										<view class="hotel-info">
											<view class="hotel-name">{{ item.name }}</view>
											<view class="hotel-type">{{ item.type }}</view>
											<view class="hotel-tags">
												<block v-for="(item, index2) in item.tags" :key="index2">
													<text class="tag">{{ item }}</text>
												</block>
											</view>
											<view class="hotel-location">{{ item.location }}</view>
											<view class="hotel-price">{{ item.price }}</view>
										</view>
										<view class="hotel-rating">评分 {{ item.rating }}</view>
									</view>
								</block>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</ant-tabs>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				hotels: [{
						name: '特色芒果饭',
						type: '傣族特色',
						tags: ['一年四季', '3-7日', '人均30'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f33252a332f7d332a2a25792a2c782f78257f2f2c2b7e2b79257a7a252a2f7d326c727b'
					},
					{
						name: '特色芒果饭',
						type: '傣族特色',
						tags: ['一年四季', '3-7日', '人均10'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f33252a332f7d332a2a25792a2c782f78257f2f2c2b7e2b79257a7a252a2f7d326c727b'
					},
					{
						name: '特色芒果饭',
						type: '傣族特色',
						tags: ['一年四季', '3-7日', '人均10'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f33252a332f7d332a2a25792a2c782f78257f2f2c2b7e2b79257a7a252a2f7d326c727b'
					},
					{
						name: '特色芒果饭',
						type: '傣族特色',
						tags: ['一年四季', '3-7日', '人均10'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f33252a332f7d332a2a25792a2c782f78257f2f2c2b7e2b79257a7a252a2f7d326c727b'
					}
				],
				hotelss: [{
						name: '傣族服饰屋',
						type: '傣族服饰',
						tags: ['一年四季', '男女可用', '人均199'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337e2f33247a332a2a7d7e252e242b78257f2f2c2b7e2b79252a7f7e2f247a326c727b'
					},
					{
						name: '傣族服饰屋',
						type: '傣族服饰',
						tags: ['一年四季', '男女可用', '人均199'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337e2f33247a332a2a7d7e252e242b78257f2f2c2b7e2b79252a7f7e2f247a326c727b'
					},
					{
						name: '傣族服饰屋',
						type: '傣族服饰',
						tags: ['一年四季', '男女可用', '人均199'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337e2f33247a332a2a7d7e252e242b78257f2f2c2b7e2b79252a7f7e2f247a326c727b'
					},
					{
						name: '傣族服饰屋',
						type: '傣族服饰',
						tags: ['一年四季', '男女可用', '人均199'],
						location: '云南西双版纳',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337e2f33247a332a2a7d7e252e242b78257f2f2c2b7e2b79252a7f7e2f247a326c727b'
					}
				],
				hotelsss: [{
						name: '瓦放特色民居',
						type: '民宿',
						tags: ['一年四季', '经济型', '免费停车'],
						location: '云南西双版纳',
						price: '¥1.9万',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337928332d29332a2a252b7d2d2a7878257f2f2c2b7e2b7925292d79282d29326c727b'
					},
					{
						name: '瓦放特色民居',
						type: '民宿',
						tags: ['一年四季', '经济型', '免费停车'],
						location: '云南西双版纳',
						price: '¥1.9万',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337928332d29332a2a252b7d2d2a7878257f2f2c2b7e2b7925292d79282d29326c727b'
					},
					{
						name: '瓦放特色民居',
						type: '民宿',
						tags: ['一年四季', '经济型', '免费停车'],
						location: '云南西双版纳',
						price: '¥1.9万',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337928332d29332a2a252b7d2d2a7878257f2f2c2b7e2b7925292d79282d29326c727b'
					},
					{
						name: '瓦放特色民居',
						type: '民宿',
						tags: ['一年四季', '经济型', '免费停车'],
						location: '云南西双版纳',
						price: '¥1.9万',
						rating: '5.0',
						image: 'https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337928332d29332a2a252b7d2d2a7878257f2f2c2b7e2b7925292d79282d29326c727b'
					}
				],
				items: [{
						title: '风俗介绍',
						subTitle: '描述文案',
						content: '西瓜',
						description: '泼水节是傣族最隆重的节日，也是云南少数民族中影响面最大，参加人数最多的节日。泼水节是傣族的新年，相当于公历的四月中旬，一般持续3至7天。第一天傣语叫“麦日”，与农历的除夕相似；第二天傣语叫“恼日”（空日）；第三天是新年，叫“叭网玛”，意为岁首，人们把这一天视为最美好，最吉祥的日子。',
						shijian: '时间：',
						time: '四月中旬',
						chixu: '持续：',
						duration: '3~7天',
						minzhu: '民族',
						ethnicity: '傣族',
						warning: '注意事项：傣族的泼水节需要泼水，体质较差慎重'
					},
					{
						title: '附近美食'
					},
					{
						title: '拍照打卡'
					},
					{
						title: '住宿'
					}
				]
			};
		},
		methods: {
			onSwipeChange(e) {
				this.setData({
					current: e.detail.current
				});
			},

			onChange(current) {
				this.setData({
					current
				});
			}
		}
	};
</script>
<style>
	.container {
		padding: 10px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		display: flex;
		font-size: 16px;
		margin-bottom: 20px;
		text-indent: 2em;
		line-height: 1.5em;
	}

	.details {
		display: block;
		margin-bottom: 20px;
		box-shadow: 4px 0 4px 0 #aeb0b2;
	}

	.detail-item {
		display: block;
		margin-bottom: 10px;
	}

	.label {
		display: inline-block;
	}

	.value {
		display: inline-block;
		margin-left: 10px;
	}

	.warning {
		display: flex;
		color: red;
		box-shadow: 4px 0 4px 0 #aeb0b2;
	}

	.box {
		width: 100%;
	}

	.content1 {
		height: 150px;
		line-height: 150px;
		text-align: center;
		background-color: #ffffff;
	}

	.box1 {
		width: 100%;
		height: 500px;
	}

	.box3 {
		padding: 10px;
	}

	.recommend-section {
		padding: 10px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.hotel-card {
		display: flex;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		overflow: hidden;
	}

	.hotel-image {
		width: 102px;
		height: 102px;
	}

	.hotel-info {
		padding: 10px;
		flex: 1;
	}

	.hotel-name {
		font-size: 16px;
		font-weight: bold;
	}

	.hotel-type,
	.hotel-location,
	.hotel-price {
		font-size: 14px;
		color: #666;
	}

	.hotel-tags .tag {
		margin-right: 5px;
		background-color: #eee;
		padding: 2px 5px;
		border-radius: 3px;
		color: #ee3a49;
	}

	.hotel-rating {
		padding: 10px;
		font-size: 14px;
		color: #f60;
	}

	.content {
		height: 600px;
		background-color: #ffffff;
	}
</style>